{% extends "../base_adminlte.html" %}
{% load staticfiles %}
{% load widget_tweaks  %}
{% block content %}
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>haha</title>
</head>
<div class="content-wrapper">


  <section class="content" >
        <div class="card card-default">
          <!-- /.card-header -->
          <div class="card-body">
            <div class="row">
              <div class="col-6">
                <div class="form-group">
                  <label>AnsibleRoles</label>
                  <select class="duallistbox" multiple="multiple"  name="rolelist" id='rolelist'>
                      {% for g in roles %}
                          <option value={{ g.ansiblerole }}>
                              {{ g.ansiblerole }}
                          </option>
                      {% endfor %}
                  </select>
                </div>
              </div>
              <div class="col-6">
                <div class="form-group">
                  <label>软件列表</label>
                  <select class="duallistbox" multiple="multiple" name="softlist" id='softlist'>
                      {% for g in softwares %}
                          <option value={{ g.software }}>
                              {{ g.software }}
                          </option>
                      {% endfor %}
                  </select>
              </div>
                <!-- /.form-group -->
              </div>
              <!-- /.col -->
            <!-- /.row -->
          </div>
        </div>
        </div>
      <div class="card card-default">
        <div class="card-body">
            <div class="row">
              <div class="col-12">
                <div class="form-group">
                  <label>系统列表</label>
                  <select class="duallistbox" multiple="multiple" name="systems" id='systems'>
                      {% for g in syslist %}
                          <option value={{ g }}>
                              {{ g }}
                          </option>
                      {% endfor %}
                  </select>
                </div>
              </div>
            </div>
        </div>
      </div>
        <!-- /.card -->
  <button type="button" id="push" class="btn btn-primary">提交</button>
  </section>
</div>
{% endblock %}
{% block scriptcontent %}
<!-- Bootstrap4 Duallistbox -->
<script src="/static/adminlte/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
<script>
  $(function () {
    //Bootstrap Duallistbox
    $('.duallistbox').bootstrapDualListbox()
  })
  $('#push').click(function(){
     rolelist = $("#rolelist").val();
     softlist = $("#softlist").val();
     syslist = $("#systems").val();
     if (syslist == '')
        alert("没有选择系统");
     else if (rolelist == '' && softlist == '')
        alert("请至少选择一个角色或者软件");
     else{
         $('#push').attr('disabled', true);
         var newdata = {'roles':JSON.stringify(rolelist),'softs':JSON.stringify(softlist),'syss':JSON.stringify(syslist)}
        $.ajax({
             url: '/ansible/dispatch/',
             data: newdata,
             type: 'GET',
             dataType: 'json',
             success: function ( data ) {
                $('#push').removeAttr('disabled')
                alert(data);
             },
             error: function (xhr, textStatus, errorThrown) {
            /*错误信息处理*/
                 $('#push').removeAttr('disabled')
    　　　　　　　　alert("请求失败! 状态码："+xhr.status + "错误信息:"+xhr.statusText);　　　　　　　　　
             },
        });
     }
  });
</script>
{% endblock %}